<template>
    <!-- 风险清单 -->
    <div class="riskInventory">
        <ul class="header">
            <li class="currentLi">风险清单</li>
            <li @click="go2">风险监控</li>
            <li @click="go3">风险统计</li>
        </ul>
        <div class="queryDiv">
            <div class="queryDiv_top">
                <ul class="ul11">
                    <li class="clearfix">
                        <span class="spa">单位名称</span>
                        <em @click="companyPropShow = true"
                            v-if="!name1">默认本单位
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="companyPropShow = true"
                            v-else>{{name1}}
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                    </li>
                    <li class="clearfix">
                        <span class="spa">是否为重大风险
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </span>
                        <em>
                            <div>
                                <input type="radio"
                                       name="radio"
                                       value="0"
                                       v-model="parmas.data.IsBigSource">否
                            </div>
                            <div>
                                <input type="radio"
                                       name="radio"
                                       value="1"
                                       v-model="parmas.data.IsBigSource">是
                            </div>
                        </em>
                    </li>
                    <li class="clearfix">
                        <span class="spa">风险等级</span>
                        <!-- <em @click="$router.push({path:'./search2',query:{radios:name2}})"
                            v-if="!name2">全部
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="$router.push({path:'./search2',query:{radios:name2}})"
                            v-else>{{name2}}
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em> -->
                        <div class="group">
                            <group>
                                <popup-picker :data="name2List"
                                              v-model="name2Arr"
                                              @on-change="changeName2"
                                              placeholder="全部"></popup-picker>
                            </group>
                        </div>
                    </li>
                    <li class="clearfix">
                        <span class="spa">可能导致的事故类别</span>
                        <em @click="accidentPropShow = true"
                            v-if="!name3">全部
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="accidentPropShow = true"
                            v-else>{{name3}}
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                    </li>
                </ul>
                <div class="queryBtn"
                     @click="query">查询</div>
            </div>
        </div>
        <h2>总数: {{total}}</h2>
        <ul class="destail"
            v-if="nodata">
            <li v-for="(item,index) in listArr"
                :key="index"
                @click="$router.push({path:'./desInvebtory',query:{item:item}})">
                <p>{{item.Hazards}} </p>
                <x-icon type="ios-arrow-right"
                        size=""
                        class="icon-white"></x-icon>
            </li>
        </ul>
        <!-- <p v-if="!nodata" class="noDestail">暂无数据...</p> -->
        <noData v-if="listArr == 0"></noData>
        <myMenu @clickBack="back"
                backPath='/Index/newEdit'></myMenu>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompany"></companyProp>
        <accidentProp :accidentPropShow="accidentPropShow"
                      :selectAccident="selectAccident"></accidentProp>
    </div>
</template>
<script>
import { Radio } from 'vux'
import myMenu from '@/commonComponents/menu'
import companyProp from '@/commonComponents/companyProp'
import accidentProp from '@/commonComponents/accidentProp'
export default {
    components: {
        Radio,
        myMenu,
        companyProp,
        accidentProp
    },
    data () {
        return {
            name1: '',
            name2: '',
            name2Arr: [],
            name2List: [['全部', '一级', '二级', '三级', '四级', '全部']],
            name3: '',
            parmas: {
                allowPaging: 'true',
                business: 'GetRiskclassificationControl',
                data: {
                    departId: '',
                    SourceLevel: '',
                    IsBigSource: 0,
                    AccidentType: ''
                },
                pageIndex: 0,
                pageSize: 20000,
                tokenId: '',
                userId: ''
            },
            listArr: [],
            total: 0,
            nodata: true,
            companyPropShow: false,
            accidentPropShow: false
        }
    },
    created () {
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.parmas.userId = token.userid
        // if (window.sessionStorage.getItem('name1')) {
        //     this.name1 = window.sessionStorage.getItem('name1')
        //     this.parmas.data.departId = window.sessionStorage.getItem('departId')
        // } else {
        this.name1 = token.deptname
        this.parmas.data.departId = token.deptid
        // }
        // if (window.sessionStorage.getItem('name2')) {
        //     this.name2 = window.sessionStorage.getItem('name2')
        //     this.parmas.data.SourceLevel = window.sessionStorage.getItem('name2')
        // }
        // if (JSON.parse(window.sessionStorage.getItem('name3'))) {
        //     var name = JSON.parse(window.sessionStorage.getItem('name3'))
        //     var name3 = ''
        //     for (var k of name) {
        //         name3 += k + ','
        //         console.log(name3, 1990)
        //     }
        //     this.name3 = name3.substring(0, name3.length - 1)
        //     this.parmas.data.AccidentType = this.name3
        // }
        this.dataArr()
    },
    // mounted () {
    //     this.dataArr()
    // },
    methods: {
        back () {
            window.sessionStorage.removeItem('name1')
            window.sessionStorage.removeItem('departId')
            window.sessionStorage.removeItem('name2')
            window.sessionStorage.removeItem('name3')
        },
        go2 () {
            window.sessionStorage.clear()
            this.$router.push('./riskMonitoring')
        },
        go3 () {
            window.sessionStorage.clear()
            this.$router.push('./riskInfo')
        },
        dataArr () {
            this.$axiosAjax.getConfigJson(this.parmas).then((res) => {
                console.log(res, 159)
                if (res.status == 200) {
                    this.listArr = res.data.data
                    this.total = res.data.count
                    if (res.data.data != null && res.data.data.length > 0) {
                        this.nodata = true
                    } else {
                        this.nodata = false
                    }
                }
            }
            )
        },
        query () {
            this.dataArr()
        },
        selectCompany (item) {
            this.companyPropShow = false
            this.name1 = item.Name
            this.parmas.data.departId = item.Id
        },
        changeName2 (value) {
            this.name2 = value[0] === '全部' ? '' : value[0]
            this.parmas.data.SourceLevel = this.name2
        },
        selectAccident (val) {
            var name3 = ''
            for (var k of val) {
                name3 += k + ','
            }
            this.name3 = name3.substring(0, name3.length - 1)
            this.parmas.data.AccidentType = this.name3
            this.accidentPropShow = false
        }
    }
}
</script>
<style lang="less" scope>
.riskInventory {
    width: 100%;
    height: 100%;
    background-color: #ebeef3;
    .header {
        width: 100%;
        height: 60px;
        padding-left: 50px;
        background-color: #fff;
        li {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 44px;
            color: #999;
            font-size: 16px;
        }
        .currentLi {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 44px;
            color: #2269ff;
            font-size: 16px;
            border-bottom: 4px solid #2269ff;
        }
    }
    .queryDiv {
        width: 100%;
        background-color: #fff;
        margin-top: 10px;
        .queryDiv_top {
            width: 100%;
            padding-bottom: 1px;
            background-color: #fff;
            .ul11 {
                padding: 0 10px;
                li {
                    padding: 10px 0;
                    border-bottom: 1px solid #eee;
                    width: 100%;
                    height: 50px;
                    line-height: 30px;
                    position: relative;
                    font-size: 16px;
                    display: flex;
                    align-items: center;
                    .group {
                        flex: 1;
                    }
                    .vux-x-icon {
                        fill: #999;
                        float: right;
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        top: 14px;
                        right: 0px;
                    }
                    .spa {
                        float: left;
                        height: 30px;
                        line-height: 30px;
                        width: 140px;
                        font-size: 14px !important;
                        line-height: 30px !important;
                        color: #333;
                    }
                    em {
                        float: right;
                        color: #999;
                        width: 200px;
                        height: 30px;
                        font-size: 14px;
                        line-height: 30px;
                        text-align: right;
                        margin-right: 20px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        div {
                            float: right;
                            margin-left: 20px;
                            width: 26%;
                            position: relative;
                            text-align: right;
                            color: #999;
                            input {
                                width: 16px;
                                height: 16px;
                                position: absolute;
                                top: 6px;
                                left: 10px;
                                text-align: center;
                            }
                        }
                    }
                }
            }
            .queryBtn {
                height: 40px;
                line-height: 40px;
                left: 40px;
                margin: 25px auto;
                text-align: center;
                width: 200px;
                border-radius: 25px;
                background-color: #2269ff;
                letter-spacing: 4px;
                color: #fff;
            }
        }
    }
    h2 {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: right;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .destail {
        width: 100%;
        background-color: #fff;
        li {
            width: 100%;
            height: 54px;
            line-height: 54px;
            padding-left: 20px;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
            p {
                height: 54px;
                line-height: 54px;
                width: 300px;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                color: #333;
            }
            .vux-x-icon {
                fill: #666;
                float: right;
                width: 20px;
                height: 20px;
                margin: 16px;
            }
        }
    }
    .noDestail {
        background-color: #fff;
        padding: 0 10px;
        height: 50px;
        line-height: 50px;
    }
}
</style>
<style>
.riskInventory .ul11 .vux-no-group-title {
    margin-top: 0;
}
.riskInventory .ul11 .weui-cells:after {
    border-bottom: 0;
}
.riskInventory .ul11 .weui-cells:before {
    border-top: 0;
}
.riskInventory .weui-cell_access .weui-cell__ft::after {
    height: 8px;
    width: 8px;
    margin-top: -6px;
    border-radius: 2px;
    border-width: 2px 2px 0 0;
}
.riskInventory .ul11 .weui-cell {
    padding-right: 5px;
}
.riskInventory .vux-cell-placeholder,
.riskInventory .vux-cell-value {
    font-size: 14px;
    color: #999;
}
</style>
